<template>
  <div>
    <Echart
      :options="options"
      height="240px"
      width="470px"
    />
  </div>
</template>

<script>
import Echart from '../../../common/echart'

export default {
  components: {
    Echart
  },
  // 这里是预留给你传数据的
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      options: {}
    }
  },
  watch: {
    cdata: {
      handler() {
        const _this = this
        // 绘制左侧面
        const CubeLeft = _this.$echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0
          },
          buildPath: function(ctx, shape) {
            const xAxisPoint = shape.xAxisPoint
            console.log(shape)
            const c0 = [shape.x + 17, shape.y]
            const c1 = [shape.x - 1, shape.y - 6]
            const c2 = [xAxisPoint[0] - 1, xAxisPoint[1] - 13]
            const c3 = [xAxisPoint[0] + 17, xAxisPoint[1]]
            ctx
              .moveTo(c0[0], c0[1])
              .lineTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .closePath()
          }
        })
        // 绘制右侧面
        const CubeRight = _this.$echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0
          },
          buildPath: function(ctx, shape) {
            const xAxisPoint = shape.xAxisPoint
            const c1 = [shape.x + 17, shape.y]
            const c2 = [xAxisPoint[0] + 17, xAxisPoint[1]]
            const c3 = [xAxisPoint[0] + 35, xAxisPoint[1] - 15]
            const c4 = [shape.x + 35, shape.y - 15]
            ctx
              .moveTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .lineTo(c4[0], c4[1])
              .closePath()
          }
        })
        // 绘制顶面
        const CubeTop = _this.$echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0
          },
          buildPath: function(ctx, shape) {
            const c1 = [shape.x + 17, shape.y]
            const c2 = [shape.x + 35, shape.y - 15] // 右点
            const c3 = [shape.x + 17, shape.y - 20]
            const c4 = [shape.x - 1, shape.y - 6]
            ctx
              .moveTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .lineTo(c4[0], c4[1])
              .closePath()
          }
        })
        // 注册三个面图形
        _this.$echarts.graphic.registerShape('CubeLeft', CubeLeft)
        _this.$echarts.graphic.registerShape('CubeRight', CubeRight)
        _this.$echarts.graphic.registerShape('CubeTop', CubeTop)

        const VALUE = [2016, 1230, 3790]
        this.options = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function(params, ticket, callback) {
              const item = params[1]
              return item.name + ' : ' + item.value
            }
          },
          grid: {
            left: '10%',
            right: '10%',
            top: '15%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['A', 'B', 'C'],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 12,
              textStyle: {
                color: 'rgba(116, 149, 203, 1)'
              },
              margin: 20
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(116, 149, 203, 0.5)',
                type: 'dashed'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 12,
              textStyle: {
                color: 'rgba(116, 149, 203, 1)'
              },
              margin: 20
            },
            boundaryGap: ['10%', '10%']
          },
          series: [
            {
              type: 'custom',
              renderItem: (params, api) => {
                const location = api.coord([api.value(0), api.value(1)])
                return {
                  type: 'group',
                  children: [
                    {
                      type: 'CubeLeft',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                      },
                      style: {
                        fill: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: '#096acc'
                          },
                          {
                            offset: 1,
                            color: '#096acc'
                          }
                        ])
                      }
                    },
                    {
                      type: 'CubeRight',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                      },
                      style: {
                        fill: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: '#096acc'
                          },
                          {
                            offset: 1,
                            color: '#096acc'
                          }
                        ])
                      }
                    },
                    {
                      type: 'CubeTop',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                      },
                      style: {
                        fill: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: '#096acc'
                          },
                          {
                            offset: 1,
                            color: '#096acc'
                          }
                        ])
                      }
                    }
                  ]
                }
              },
              data: VALUE
            },
            {
              type: 'bar',
              itemStyle: {
                color: 'transparent'
              },
              tooltip: {},
              data: VALUE
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
